var rq = {
    getCarType:function ({data,success,fail,compelet}) {
        $.ajax({
            type: "GET",
            url: "/api/dz/getCx",
            data: data,
            dataType: "json",
            success: success,
            fail: fail,
            compelet: compelet
        });
    },
    getStoreType:function ({data,success,fail,compelet}) {
        $.ajax({
            type: "GET",
            url: "/api/dz/getJxs",
            data: data,
            dataType: "json",
            success: success,
            fail: fail,
            compelet: compelet
        });
    },
    getImgList:function ({data,success,fail,compelet}) {
        $.ajax({
            type: "GET",
            url: "/api/dz/getImg",
            data: data,
            dataType: "json",
            success: success,
            fail: fail,
            compelet: compelet
        });
    },
    subForm:function ({data,success,fail,compelet}) {
        $.ajax({
            type: "POST",
            url: "/api/dz/postBm",
            data: data,
            dataType: "json",
            success: success,
            fail: fail,
            compelet: compelet
        });
    },
}
var page = new Vue({
    el:"#page",
    data:{
        system:{
            width:window.innerWidth,
            height:window.innerHeight
        },
        agreeText:`尊敬的用户，您选择使用“自动输入历史手机号”功能后，您同意本平台在法律允许的范围内，收集您的手机号码，您已知晓并同意在您下次浏览广告页面时，我们会帮您预先填写您上次输入的历史手机号，您的手机号码仅会用于在广告页面的预填充，且只有您点击提交按钮之后信息才会传递给广告主商家。`,
        formData:[
            {name:"姓名",id:"name",value:"",type:"input"},
            {name:"电话",id:"phone",value:"",type:"input",check:"phone"},
            {name:"意向车型",id:"cx_id",value:"",type:"choose",key:"cx",list:[
                {name:"Polo"},
                {name:"Cross Polo"},
                {name:"全新一代Polo Plus"},
                {name:"新桑塔纳"},
                {name:"桑塔纳·浩纳"},
                {name:"全新一代朗逸两厢"},
                {name:"朗逸"},
                {name:"全新一代朗逸"},
                {name:"全新凌渡"},
                {name:"全新一代帕萨特"},
                {name:"帕萨特 PHEV"},
                {name:"辉昂"},
                {name:"全新途安L"},
                {name:"T-Cross"},
                {name:"途岳"},
                {name:"途观丝绸之路版"},
                {name:"全新途观L"},
                {name:"途观L PHEV"},
                {name:"途昂"},
                {name:"途昂X"}
            ]},
            {name:"意向经销商",id:"jxs_id",value:"",type:"choose",key:"jxs",list:[
                {name:"和平汽车（南昌红谷滩汽车广场A区）"},
                {name:"智通汽车（南昌洪都北大道）"},
                {name:"恒信众成（南昌高新南大道）"},
                {name:"江西运通（南昌迎宾中大道）"},
                {name:"江西通达（南昌北京东路）"},
                {name:"广甸宝晟（南昌民营科技园科技大道）"}
            ]}
        ],
        agreeInfo:true,
        mask:{
            show:false,
            nowName:"form"
        },
        maskModel:[
            {name:"",id:"form"},
            {name:"游戏活动",id:"game"},
            {name:"卡券列表",id:"over"},
            {name:"卡券",id:"card"}
        ],
        /**
         * loadStart 开始加载中
         * readyNum 准备时间
         * btnSatrt 是否显示开始按钮
         * btnSatrtStyle 是否显示开始离开样式
         * 
         * nowGiftNum 计分板-获得红包
         * nowTime 计分板-游戏时间
         * maxTime 游戏最大时间
         * giftTypeList 红包样式列表
         * giftStyle 红包配置样式
         * padding 红包界面左右两边的间隔
         * giftList 红包列表
         * userGiftList 获得红包列表
         * gameOverEnd 游戏结束
         */
        gameConfig:{
            loadStart:false,
            readyNum:4,
            btnSatrt:true,
            btnSatrtStyle:false,
            nowGiftNum:0,
            maxTime:10,
            nowTime:0,
            padding:20,
            dropTime:5,
            /**
             * speed 掉落速度
             * worth 价值
             */
            giftTypeList:[
                {name:"红包一",imgUrl:"images/game-style/gift1.png",speed:4,worth:2,width:60},
                {name:"红包二",imgUrl:"images/game-style/gift2.png",speed:2,worth:2,width:48},
                {name:"红包三",imgUrl:"images/game-style/gift3.png",speed:1,worth:2,width:38}
            ],
            /**
             * floatSize 红包大小浮动
             * showAll Y轴下的完全展示（百分比）
             * floatZ 红包摆动区间(单位deg)
             * satrtTop 起始高度
            */
            giftStyle:{
                floatSize:[0.5, 1.5],
                showAll:0.1,
                floatZ:[-30, 30],
            },
            giftList:[],
            userGiftList:[],
            gameOverEnd:false
        },
        maskPages:{
            form:{ },
            agrees:{
                closeBind:"backForm"
            },
            game:{
                closeBind:"endGame"
            },
            over:{ },
            card:{
                closeBind:"backOver"
            }
        },
        ticketList:[
            {imgUrl:"./images/end-ticket1.png",simgUrl:"./images/card2.png"},
            {imgUrl:"./images/end-ticket2.png",simgUrl:"./images/card1.png"},
        ],
        nowCard:0,
        detailsList:[]
    },
    methods: {
        toMask(name){
            console.log(name)
            if(name){
                this.mask.nowName = name
                if(name=="game"){
                    window.scrollTo(0,1)
                }
                this.mask.show = true
            }else{
                console.log(this.maskPages[this.mask.nowName].closeBind)
                if(this.maskPages[this.mask.nowName].closeBind && typeof this[this.maskPages[this.mask.nowName].closeBind]=="function"){
                    this[this.maskPages[this.mask.nowName].closeBind]()
                }else{
                    this.mask.show = false
                }
            }
        },
        endGame(){
            layer.open({
                content:"是否要退出抢红包游戏？",
                btn:["确认","取消"],
                yes:index=>{
                    layer.close(index)
                    if(this.gameConfig.readyNum!=4 || !this.gameConfig.btnSatrt){this.mask.nowName = 'over'}
                    this.mask.show = false
                }
            })
        },
        toAgree(){
            this.agreeInfo = true
            this.toMask("form")
        },
        backForm(){
            this.toMask("form")
        },
        backOver(){
            this.toMask("over")
        },
        toCard(index){
            this.nowCard = index
            this.toMask("card")
        },
        toSubmit(name){
            var b = true
            var formJson = {}
            for(var i in this.formData){
                if(this.formData[i].value == ""){
                    layer.open({
                        content:"请完善"+this.formData[i].name,
                        btn:"确定",
                    })
                    b = false
                    break;
                }else if(this.formData[i].check && this.formData[i].check=="phone" && !(/^1[3456789]\d{9}$/.test(this.formData[i].value))){
                    layer.open({
                        content:"手机号填写错误，请认真核对",
                        btn:"确定",
                    })
                    b = false
                    break;
                }else{
                    formJson[this.formData[i].id] = this.formData[i].value
                }
            }
            if(!this.agreeInfo){
                layer.open({
                    content:`请先查看"个人信息授权书"，并同意`,
                    btn:"确定",
                })
                b = false
            }
            if(b){
                rq.subForm({
                    data:formJson,
                    success:res=>{
                        if(res.code==1){
                            layer.open({
                                content:"报名成功！即将进入抢红包小游戏",
                                btn:["立即进入","稍后"],
                                shadeClose:false,
                                yes:index=>{
                                    layer.close(index)
                                    this.toMask(name)
                                },
                                no:index=>{
                                    this.mask.nowName = 'game'
                                    this.mask.show = false
                                }
                            })
                        }else{
                            layer.open({
                                content:res.msg,
                                btn:["确定"],
                            })
                        }
                    }
                })
                
            }
            
        },
        initGame(){
            this.gameConfig.nowTime = this.gameConfig.maxTime
        },
        toGameStart(){
            if(this.gameConfig.nowTime<=0){
                layer.open({
                    content:"游戏已结束",
                    btn:["确认"],
                    shadeClose:false,
                    yes:index=>{
                        layer.close(index)
                        this.toMask()
                    }
                })
            }
            else if(!this.gameConfig.loadStart){
                this.gameConfig.loadStart = true
                var intime = setInterval(()=>{
                    this.gameConfig.readyNum -= 1
                    if(this.gameConfig.readyNum<=0){
                        clearInterval(intime)
                        setTimeout(()=>{
                            this.gameConfig.btnSatrtStyle = true
                            setTimeout(()=>{
                                this.gameConfig.btnSatrt = false
                                this.gameConfig.btnSatrtStyle = false
                                this.gameConfig.loadStart = false
                                this.gameConfig.readyNum = 4
                                this.gameStart()
                            },700)
                        },100)
                    }
               },1000)
            }
        },
        gameStart(){
            var n = 0,ms = 0.1
            var gameTimeId = setInterval(()=>{
                n++ 
                if(n%2==0){ this.makeGift() }
                if(n%(1/ms)==0){ this.gameConfig.nowTime-=1 }
                
                if(this.gameConfig.nowTime <=0){ 
                    clearInterval(gameTimeId)
                    setTimeout(()=>{
                        this.gameEnd()
                    },4000)
                }
            },ms*1000)
        },
        gameEnd(){
            if(this.mask.nowName == 'game'){
                layer.open({
                    content:"游戏结束，最终获得红包数"+this.gameConfig.nowGiftNum,
                    btn:["确认"],
                    shadeClose:false,
                    yes:index=>{
                        layer.close(index)
                        this.toMask('over')
                    }
                })  
            }
            
        },
        makeGift(){
            this.gameConfig.giftList.push({
                style:parseInt(Math.random()*10)%this.gameConfig.giftTypeList.length,
                zAngle:parseFloat(((this.gameConfig.giftStyle.floatZ[1]-this.gameConfig.giftStyle.floatZ[0])*Math.random()).toFixed(2))+this.gameConfig.giftStyle.floatZ[0],
                size:parseFloat(((this.gameConfig.giftStyle.floatSize[1]-this.gameConfig.giftStyle.floatSize[0])*Math.random()).toFixed(2))+this.gameConfig.giftStyle.floatSize[0],
                show:true,
                left:parseInt((this.system.width-this.gameConfig.padding*2)*Math.random()),
            })
        },
        getGift(i){
            console.log('红包数+1',i)
            this.gameConfig.giftList[i].show = false
            this.gameConfig.nowGiftNum += 1
        }
    },
    mounted() {
        this.initGame()
    },
    created() {
        console.log(parseInt(1.6))
        rq.getCarType({
            success:res=>{
                this.formData[2].list = res
            }
        })
        rq.getStoreType({
            success:res=>{
                this.formData[3].list = res
            }
        })
        rq.getImgList({
            success:res=>{
                this.detailsList = res
            }
        })
    },
    computed: {
        startBtn(){
            return function (num) {
                switch (num) {
                    case 4:
                        num = "开始"
                        break;
                    case 0:
                        num = "GO!"
                        break;
                    default:
                        break;
                }
                if(typeof num==="number"){
                    num = num < 0 ? "GO!" : num
                }
                return num
            }
        },
        parsiInt(){
            return function (num) {
                return parseInt(num)
            }
        },
        toFixed(){
            return function (num,d) {
                return num.toFixed(d)
            }
        }
    },
})
var maskBox = {
    name:"mask-box",
    html:``
}